<template>
  <div>
    <el-row>
      <el-col :span="24" class="addRole">
        <!-- 查询 -->
        <el-popover placement="bottom-start" width="1000" style="margin-right:10px;" trigger="click">
          <el-form :inline="true" :model="search">
              <el-form-item label="图纸编号" >
                  <el-input v-model="search.drawCode" @keyup.enter.native="searchBtn"></el-input>
              </el-form-item>
              <el-form-item label="生产令号" >
                  <el-input v-model="search.makeNo"  @keyup.enter.native="searchBtn"></el-input>
              </el-form-item>
              <el-form-item label="任务流水号" >
                  <el-input v-model="search.taskSerialNo"  @keyup.enter.native="searchBtn"></el-input>
              </el-form-item>
              <!-- <el-form-item label="自定义编码" >
                  <el-input v-model="search.code"></el-input>
              </el-form-item> -->
              <el-form-item label="任务单号" >
                  <el-input v-model="search.taskNo"  @keyup.enter.native="searchBtn"></el-input>
              </el-form-item>
              <el-form-item label="客户" >
                  <el-input v-model="search.customer"  @keyup.enter.native="searchBtn"></el-input>
              </el-form-item>
              <el-form-item label="29所编码" >
                  <el-input v-model="search.code29"  @keyup.enter.native="searchBtn"></el-input>
              </el-form-item>
              
              <el-button type="primary" @click="searchBtn" >确认</el-button>
          </el-form>
          <el-button slot="reference" type="primary" icon="el-icon-search">查询</el-button>
        </el-popover>
        <el-popover
                ref="createValue"
                width="900"
                trigger="click"
            >
            <!-- private String taskNo;//任务单号
            private Integer drawCount;//图纸张数
            private Long drawNum;//图纸件数
            private BigDecimal sxWorkTime;//数铣总工时
            private BigDecimal pxWorkTime;//普洗总工时
            private BigDecimal totalPrices;//总价值 --> 
                <h1 style="color: #FFFFFF;background-color: #3ac1c4;margin-bottom:15px;padding:5px 0px 5px 15px; border-radius:3px;">今日记录</h1>
                <h1 style="margin-bottom:15px;padding:5px 0px 5px 15px;">导入计划次数:<span style="color:red;"> {{inputCount}}</span> 次</h1>
                <div style="width:95%;border:1px solid gray; margin:0 auto; padding:5px 5px 5px 5px;">
                    <el-table  :data="detailTableList"  tooltip-effect  highlight-current-row border stripe>
                        <el-table-column type="index" :index="0" label="序号" min-width="120" align="center"></el-table-column>
                        <el-table-column property="drawCode" label="图纸编号" min-width="120" align="center" sortable></el-table-column>
                        <el-table-column property="startTime" label="处理开始时间" min-width="120" align="center" sortable>
                          <template v-slot:default="scope">
                              <div v-html="timestampToTime(scope.row.startTime,'mm-dd hh:mm')"></div>
                          </template>
                        </el-table-column>
                        <el-table-column property="endTime" label="处理结束时间" min-width="120" align="center" sortable>
                           <template v-slot:default="scope">
                              <div v-html="timestampToTime(scope.row.endTime,'mm-dd hh:mm')"></div>
                          </template> 
                        </el-table-column>
                        <el-table-column property="consumptionTime" label="耗时" min-width="120" align="center" sortable></el-table-column>
                        <el-table-column property="proportion" label="工作时间占比" min-width="120" align="center" sortable>
                          <template v-slot:default="scope">
                              {{scope.row.proportion+'%'}}
                          </template>
                        </el-table-column>
                    </el-table>
                </div>
        </el-popover>
        <el-popover
                ref="createValueList"
                :width="autoWidth"
                trigger="click"
            >
                <h1 style="color: #FFFFFF;background-color: #3ac1c4;margin-bottom:15px;padding:5px 0px 5px 15px; border-radius:3px;">工作统计</h1>
                <!-- <h1 style="margin-bottom:15px;padding:5px 0px 5px 15px;">导入计划次数:<span style="color:red;"> {{inputCount}}</span> 次</h1> -->
                <div style="width:95%;border:1px solid gray; margin:0 auto; padding:5px 5px 5px 15px;">
                  <div style="width:400px;border:0px solid red; z-index:9999;    position:absolute;right:60px;top:55px;">
                     <span class="demonstration">时间</span>
                     <el-date-picker
                          v-model="workTimeList"
                          type="daterange"
                          align="right"
                          unlink-panels
                          range-separator="至"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期"
                          @change="searchGantt"
                          :picker-options="pickerOptions"
                          >
                     </el-date-picker>
                  </div>
                  <div id="gantt" :style="{width:'100%',height:autoHeight}">

                  </div>
                </div>
        </el-popover>
        <el-button type="primary" @click="showExcelDialog()" v-if="status ==='0'">计划导入</el-button>
        <el-button type="primary" v-popover:createValue @click="queryDayVal">缔造价值</el-button>
        <el-button type="primary" v-popover:createValueList @click="queryDayValList">个人统计</el-button>
      </el-col>
    </el-row>
    <!-- 29所列表 -->
    <tableList29 ref="tableList29" :postData="postData">
      <template v-slot:default="scope">
        <el-button @click="showDialog('update',scope.row)" type="text" size="small">详情</el-button>
        <el-button @click="confirmHandle(scope.row)" type="text" size="small" v-if="scope.row.isUploadDraw!==1"><el-link type="success">完成上传</el-link></el-button>
      </template>
    </tableList29>
    <!--计划任务详情-->
    <el-dialog class="bodyNopaddingTop" :title="dialog.title" :visible.sync="dialog.isShow" :close-on-click-modal="false"  v-dialogDrag width="1100px" @close='closeDialog' @opened="openedDialog">
      <el-tabs v-model="dialog.activeName" @tab-click="dialogHandleClick">
        <el-tab-pane label="详情" name="1">
          <taskDetail29 :detailObj="dialog.formData" :type="dialog.type" @editSuccess="editSuccess" :editDisalbe="true"></taskDetail29>
        </el-tab-pane>
        <el-tab-pane label="29所工艺" name="2" v-if="dialog.type==='update'&&dialog.formData.customer==='1'" >
          <processPlanList29 :data="dialog.formData" ref="processPlanList29Ref">
              <template v-slot:default="scope">
                <el-button @click="showDialog1('update',scope.row)" type="text" size="small">详情</el-button>
              </template>
          </processPlanList29>
        </el-tab-pane>
        <el-tab-pane label="图纸上传" name="3" v-if="dialog.type==='update'">
          <uploadtemp  :upLoadType="1" :drawNo="dialog.drawCode" :taskTotalId="workTime.taskTotalId" @insert-success="handleAvatarSuccess"></uploadtemp>
          <uploadList :upLoadType="1" :drawNo="dialog.drawCode" :taskTotalId="workTime.taskTotalId" ref="drawing"></uploadList>
        </el-tab-pane>
        <el-tab-pane label="工艺上传" name="4" v-if="dialog.type==='update'">
          <uploadtemp  :upLoadType="2" :drawNo="dialog.drawCode" :taskTotalId="workTime.taskTotalId" @insert-success="handleAvatarSuccess"></uploadtemp>
           <uploadList :upLoadType="2" :drawNo="dialog.drawCode" :taskTotalId="workTime.taskTotalId"  ref="technology"></uploadList>
        </el-tab-pane>
        <el-tab-pane label="图形文件上传" name="5" v-if="dialog.type==='update'">
          <uploadtemp  :upLoadType="3" :drawNo="dialog.drawCode" :taskTotalId="workTime.taskTotalId" @insert-success="handleAvatarSuccess"></uploadtemp>
           <uploadList :upLoadType="3" :drawNo="dialog.drawCode" :taskTotalId="workTime.taskTotalId" ref="graphicsFile"></uploadList>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
    <!-- 新增编辑29所计划任务详情 -->
    <el-dialog class="bodyNopaddingTop" :title="dialog1.title" :visible.sync="dialog1.isShow" v-dialogDrag :close-on-click-modal="false" >
      <processPlanDetail29 :formData="dialog1.formData" :type="dialog1.type" :tid="dialog.formData.tid" @editSuccess="editSuccess1" :disabled="true"></processPlanDetail29>
    </el-dialog>
    <!-- Excel 导入弹框-->
    <el-dialog class="bodyNopaddingTop" :title="dialog4.title" :visible.sync="dialog4.isShow" :close-on-click-modal="false" v-dialogDrag >
      <div>
      <el-form :model="dialog4.formData" :rules="dialog4.rules" ref="excelRef" label-width="130px" :inline="true">
        <el-form-item label="计划所属年月" prop="belongToYearMonth" >
           <el-date-picker v-model="dialog4.formData.belongToYearMonth" type="month" placeholder="选择年月" format="yyyy-MM" value-format="yyyy-MM" class="width220 noMargin"></el-date-picker>
        </el-form-item>
        <el-form-item label="计划所属周" prop="belongToWeek" >
          <el-select v-model="dialog4.formData.belongToWeek" placeholder="请选择" class="width220 noMargin">
            <el-option label="第一周" :value="1"></el-option>
            <el-option label="第二周" :value="2"></el-option>
            <el-option label="第三周" :value="3"></el-option>
            <el-option label="第四周" :value="4"></el-option>
            <el-option label="第五周" :value="5"></el-option>
        </el-select>
        </el-form-item>
        <el-form-item label="上传文件" class="form-item-block">
         <el-upload class="upload-excel text-center" drag action="string" multiple :limit="1" ref="uploadExcelRef"
          :http-request="httpRequest"
          accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel" :auto-upload="false">
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">只能上传Excel文件</div>
          </el-upload>
        </el-form-item>
        <el-form-item class="form-item-block text-center">
          <el-button type="primary" @click="uploadExcel()">上传</el-button>
        </el-form-item>
      </el-form>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import planApi from 'plugins/axios/planApi.js';
import baseApi from 'plugins/axios/baseApi.js';
import processFlowCard from './planTask/processFlowCard.vue'
import uploadtemp from 'views/components/uploadtemp.vue' /**大文件上传 */
import uploadList from 'views/components/uploadList.vue' /**1-图纸上传、2-工艺上传、3-图形文件上传 的列表组件 */
import tableList29 from 'views/components/tableList29.vue' /**29所列表组件 */
import taskDetail29 from 'views/components/taskDetail29.vue' /**29所任务详情组件 */
import processPlanList29 from 'views/components/processPlanList29.vue' /**29所工序列表组件 */
import processPlanDetail29 from 'views/components/processPlanDetail29.vue' /**29所工序详情组件 */
import echarts from 'echarts';
export default {
  components: {
    uploadtemp,
    uploadList,
    tableList29,
    taskDetail29,
    processPlanList29,
    processPlanDetail29
  },
  data(){
    return {
      customData:[],
      detailTableList:[],
      ganttChart:null,
      userId:sessionStorage.getItem('userId'),
      workTimeList:[],
      inputCount:0,
      status:'0',
      postData:{
        isMaterialArrvie:0,
        isMaterialTailor:0,
        isSearchButton:false,
        planStatus:null,
      },
      machineAllList:[],/**所有机器列表 */
      search:{
        drawCode:"",
        makeNo:"",
        code:"",
        taskSerialNo:'',
        taskNo:'',
        customer:'',
        code29:'',
      },
      dialog:{/**弹框配置 */
        title:'',
        isShow:false,
        type:'',
        formData:{},
        activeName:'2',
        otherUpDataData:{},
        uploadData:{
          drawInfo:"",
        },/**上传图纸需要额外提交的数据 */
        drawCode:''
      },
      pdfActionUrl: baseApi.drawInfoUpload(),
      dialog1:{
        title:'',
        type:'',
        isShow:false,
        formData:{}
      },
      /**excel导入弹框*/ 
      dialog4:{
        title:'',
        isShow:false,
        formData:{},
        rules:{
          belongToYearMonth:[{ required: true, message: '请选择计划所属年月', trigger: 'blur'}],
          belongToWeek:[{ required: true, message: '请选择计划所属周', trigger: 'blur'}]
        }
      },
      /**员工工时统筹
       * 
       * {"itemType":2,"startTime":"2020-06-22T09:28:00","endTime":"2020-06-22T09:31:09","taskTotalId":86016}
       * 
       */
      workTime:{
        itemType:null,
        startTime:null,
        endTime:null,
        taskTotalId:null,
      },
      grid:{
         FirstDay:null,
         LastDay:null,
         XstartTime:null,
         XendTime:null,
         YAxisData:[],
         XAxisData:[
           '08:00',
           '09:00',
           '10:00',
           '11:00',
           '12:00',
           '13:00',
           '14:00',
           '15:00',
           '16:00',
           '17:00',
           '18:00',
           '19:00',
           '20:00',
           '21:00',
           '22:00',
           '23:00',
           '24:00',
           '00:00',
           '01:00',
           '02:00',
           '03:00',
           '04:00',
           '05:00',
           '06:00',
           '07:00',
           '08:00',
         ],
         seriesData:[],
      },
      pickerOptions: {
          disabledDate(time) {
            let curDate = (new Date()).getTime();
            let three = 32 * 24 * 3600 * 1000;
            let secondMonths = curDate - three;
            return time.getTime() > Date.now() || time.getTime() < secondMonths;;
          }
      }, 
    }
  },
  created(){
    this.$nextTick(()=>{
      this.getNowMonthDate();
      this.selectUsersDzjzByDate();

    })
  },
  mounted(){
    this.status = this.$route.query.status;
    this.getTablList();
  },
  computed:{
    importStatus(){
      return this.$store.state.importStatus
    },
    importDialog(){
      return this.$store.state.importDialog
    },
    autoWidth(){
      return (this.$store.state.clientWidth-200);
    },
    autoHeight(){
      return (this.$store.state.clientHeight-200)+'px';
    },
  },
  watch: {
    $route(){
      this.status = this.$route.query.status;
      this.search.drawCode="";
      this.search.makeNo="";
      this.search.taskSerialNo="";
      this.search.code="";
      this.getTablList();
    }
  },
  methods:{
    searchGantt(val){
      let self = this;
      self.selectDzjzGantt();
      // console.log(self.workTimeList);
    },
    queryDayVal(){
      let self = this;
      self.selectUsersDzjzByDate();
    },
    queryDayValList(){
      let self = this;
      self.selectDzjzGantt();
    },
    /**员工工作内容适配器 */
    workAdapter(type){
      /**
       * 1 计划导入
        2 图纸上传
        3 工艺上传
        4 图形文件上传
        5 完成资料上传
       * 
       */
      let self = this;
      switch (type) {
        case '1':
          self.insertDzjz();
          break;
      
        default:
          break;
      }
    },
    /**员工工时统筹 */
    insertDzjz(){
      let self = this;
      let param={
        itemType:self.workTime.itemType,
        startTime:self.workTime.startTime,
        endTime:self.workTime.endTime,
        taskTotalId:self.workTime.taskTotalId,
      };
      planApi.insertDzjz(param).then(res=>{
        console.log(res.content);
      });
    },
    /**查询员工工作内容缔造价值 */
    selectUsersDzjzByDate(){
      let self = this;
      let date =  new Date();
      let param={
        date:this.timestampToTime(date,'yyyy-mm-dd'),
        postId:1,
      };
      planApi.selectUsersDzjzByDate(param).then(res=>{
        self.detailTableList =   res.content.itemList;
        self.inputCount = res.content.planImportCount;
        // res.content.planImportList;
        // console.log(res.content);
      });
    },
    /**查询某个用户某个时间段的缔造价值统计甘特图 */
    selectDzjzGantt(){
      let self = this;
      debugger;
      let startDate =  self.workTimeList?self.workTimeList[0]:self.grid.FirstDay;
      let endDate =  self.workTimeList?self.workTimeList[1]:self.grid.LastDay;
      //获取开始时间与结束时间之间相差的天数
      self.getLoopCount(startDate,endDate);
      // let tempDate =  new Date(endDate);
      //     endDate = tempDate.getFullYear()+'-'+(tempDate.getMonth()+1)+'-'+tempDate.getDay();
      /**
       *                             name:'',
                            type: 'custom',
       */
      planApi.selectDzjzGantt(self.userId,self.timestampToTime(startDate,'yyyy-mm-dd'),self.timestampToTime(endDate,'yyyy-mm-dd')).then(res=>{
        self.grid.series=[];
        self.customData = res.content;       
        self.drawCustom();
      });
    },
    getLoopCount(startDateStr,endDateStr){
      let self = this;
      debugger;
      self.grid.YAxisData = [];
      let startDate = new Date(startDateStr);
      let endDate = new Date(endDateStr);
      let startY = startDate.getFullYear();
      let endY = endDate.getFullYear();
      let startM = startDate.getMonth()+1;
      let endM = endDate.getMonth()+1;
      let startD = startDate.getDate();
      let endD = endDate.getDate();
      if(startM!=endM){
        //获取开始月份的结束时间
        let lastDayCount =  new Date(startY,startM,0).getDate()-startD;
        //获取结束时间月份的开始天数
        let fristDayCount =  endD;
          for(var i=0;i<=lastDayCount;i++){
          let data = startY+"-"+(startM<10?'0'+startM:startM)+"-"+((startD+i)<10?'0'+(startD+i):(startD+i));
          self.grid.YAxisData.push(data);
          }
          for(var i=0;i<fristDayCount;i++){
          let data = endY+"-"+(endM<10?'0'+endM:endM)+"-"+((1+i)<10?'0'+(1+i):(1+i));
          self.grid.YAxisData.push(data);
          }
          console.log(self.grid.YAxisData);
        // if(startY!=endY){
        //   for(var i=0;i<=lastDayCount;i++){
        //   let data = startY+"-"+(startM<10?'0'+startM:startM)+"-"+((startD+i)<10?'0'+(startD+i):(startD+i));
        //   self.grid.YAxisData.push(data);
        //   }
        //   for(var i=0;i<=fristDayCount;i++){
        //   let data = endY+"-"+(endM<10?'0'+endM:endM)+"-"+((1+i)<10?'0'+(1+i):(1+i));
        //   self.grid.YAxisData.push(data);
        //   }
        // }else{

        // }
      }else{
        //获取两个时间差
        let loopCount = endD -  startD;
        for(var i =0;i<=loopCount;i++){
          let data = startY+"-"+(startM<10?'0'+startM:startM)+"-"+((startD+i)<10?'0'+(startD+i):(startD+i));
          self.grid.YAxisData.push(data);
        }
        console.log(self.grid.YAxisData);
      }
    },
    /**29所计划列表 */
    getTablList(){
      let self = this;
      self.postData.drawCode=self.search.drawCode;
      self.postData.makeNo=self.search.makeNo;
      self.postData.taskSerialNo=self.search.taskSerialNo;
      self.postData.code=self.search.code;
      self.postData.isUploadDraw=self.status;
      self.postData.taskNo=self.search.taskNo;
      self.postData.customer=self.search.customer;
      self.postData.code29=self.search.code29;
      self.$refs.tableList29.get29TableList()
    },
    searchBtn(){
      this.postData.isSearchButton = true;
      this.getTablList();
    },
    showDialog(type,row){
      this.dialog.type =type;
      switch(type){
        case 'insert':
          this.dialog.activeNam='1';
          this.dialog.isShow=true;
          this.dialog.formData={};
          this.dialog.title = '新增计划任务';
          break;
        case 'update':
          this.dialog.activeName=row.customer==='1'?'2':'1';
          this.dialog.isShow=true;
          this.dialog.formData = row;
          this.workTime.taskTotalId = row.id; 
          this.dialog.title = '计划详情';
          this.dialog.drawCode = row.drawCode; 
          this.dialog.otherUpDataData.drawNo=row.drawCode;
          break;
      } 
    },
    showDialog1(type,row){
      this.dialog1.isShow=true;
      this.dialog1.type=type;
      switch(type){
        case 'insert':
          this.dialog1.formData={};
          this.dialog1.title = '新增29所工艺详情';
          break;
        case 'update':
          this.dialog1.formData = row;
          this.dialog1.title = '编辑29所工艺详情';
          break;
      }
    },
    /**修改成功后更新表格关闭弹框*/ 
    editSuccess(){
      this.dialog.isShow=false;
      this.getTablList();
      this.$message.success(`${this.dialog.title}成功`);
    },
    editSuccess1(){
      this.dialog1.isShow=false;
      this.$message.success(`${this.dialog1.title}成功`);
      self.$refs.processPlanList29Ref.getProcessPlanList();
    },
    /**详情切换tab*/ 
    dialogHandleClick(){
      /**
       *  2 图纸上传
          3 工艺上传
          4 图形文件上传
       */
      let self = this;
      switch(self.dialog.activeName){
        case '2':
          self.$refs.processPlanList29Ref.getProcessPlanList();
          break;
         case '3':
           self.workTime.itemType = 2;
           self.$refs.drawing.getTableList();
           self.dialog.otherUpDataData.type=1;
           self.dialog.uploadData.drawInfo = JSON.stringify(self.dialog.otherUpDataData);
         break;
         case '4':
           self.workTime.itemType = 3;

           self.$refs.technology.getTableList();
           self.dialog.otherUpDataData.type=2;
           self.dialog.uploadData.drawInfo = JSON.stringify(self.dialog.otherUpDataData);
          break;
        case '5':
          self.workTime.itemType = 4;
          self.$refs.graphicsFile.getTableList();
          self.dialog.otherUpDataData.type=3;
          self.dialog.uploadData.drawInfo = JSON.stringify(self.dialog.otherUpDataData);
          break;
      }
    },
    beforeAvatarUpload(file){/**文件上传前格式和大小的验证*/
      return true;
    },
    /**图纸上传、工艺上传、图形文件上传后执行的方法**/ 
    handleAvatarSuccess(result){
      switch(this.dialog.otherUpDataData.type){
          case 1:
            this.$refs.drawing.getTableList()
            break;
          case 2:
            this.$refs.technology.getTableList();
            break;
          case 3:
            this.$refs.graphicsFile.getTableList();
            break;
        }
    },
    /**打开弹框*/ 
    openedDialog(){
      if(this.dialog.type==='update'&&this.dialog.activeName==='2'){
        this.$refs.processPlanList29Ref.getProcessPlanList();
      }
    },
    /**关闭弹框*/ 
    closeDialog(){
      this.status!=='1'?this.getTablList():'';
      
    },
    /**显示Excel弹框*/ 
    showExcelDialog(){
      let self = this;
      if(self.importStatus!=='3'){
          self.$store.commit('updateImportDialog',true)
      }else{
        self.dialog4.isShow= true;
        self.dialog4.title = '导入Excel文件';
      }
      
    },
    confirmHandle(row){
      let self  = this;
      self.$confirm('是否确认资料上传完成?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          /**进行员工操作工时统筹数据加工 start */
           self.workTime.taskTotalId = row.id; 
           self.workTime.itemType = 5;
           self.workTime.startTime = new Date();
           self.insertDzjz();
          /**进行员工操作工时统筹数据加工 end */
          planApi.finishDrawUpload(row.id).then(res=>{
            self.$message.success("确认成功")
            self.getTablList();
          })
        }).catch(()=>{})
    },
    httpRequest(param){
      let self = this;
      let form =new FormData();
      form.append('belongToYearMonth', self.dialog4.formData.belongToYearMonth);
      form.append('belongToWeek', self.dialog4.formData.belongToWeek);
      form.append('file', param.file)
      baseApi.excelUpload(form).then(res=>{
        self.dialog4.isShow = false;
        self.$refs.uploadExcelRef.clearFiles();
        self.$message.success('上传成功');
        
        self.getTablList();
      })
    },
    uploadExcel(){
      let self = this;
      self.$refs['excelRef'].validate((valid) => {
          if (valid) {
            if(self.$refs.uploadExcelRef.uploadFiles.length>0){
              self.workTime.taskTotalId =  null;
              self.workTime.itemType = 4;
              self.workTime.startTime = new Date();
              self.insertDzjz();
              self.$refs.uploadExcelRef.submit()
            }else{
              self.$message.error("请选择要上传的Excel!")
            }
          } else {
            return false;
          }
        });
      
    },
    isToday(str) {
       return new Date().getTime() - new Date(str).getTime() < 86400000;
    },
    //根据所传参数时间进行该时间当天0:00与24:00的时间段点获取
    getDateAToZ(date){   
            let self = this;
            let date1 = null;
            let date2 = null;
            if(date!=null){
            date1 =   new Date(new Date(date.toLocaleDateString()).getTime());
            date2 =  new Date(new Date(date.toLocaleDateString()).getTime()+24*60*60*1000-1);
            }else
            {
            date1 = new Date(new Date(new Date().toLocaleDateString()).getTime());
            date2 = new Date(new Date(new Date().toLocaleDateString()).getTime()+24*60*60*1000-1);                
            }

            let startTime = date1.getFullYear() + "-" + ((date1.getMonth() + 1) < 10 ? "0" + (date1.getMonth() + 1):(date1.getMonth() + 1))+ "-" + (date1.getDate() < 10 ? "0" + date1.getDate():date1.getDate()) + " " + (date1.getHours()<10?"0"+date1.getHours():date1.getHours()) + ":" + (date1.getMinutes()<10?"0"+date1.getMinutes():date1.getMinutes()) + ":" + (date1.getSeconds()<10?"0"+date1.getSeconds():date1.getSeconds());

            let endTime = date2.getFullYear() + '-' + (date2.getMonth() + 1) + '-' + date2.getDate() + ' ' + date2.getHours() + ':' + date2.getMinutes() + ':' + date2.getSeconds()
            //设置甘特图上面操作按钮栏 时间插件el-date-picker 默认展示当天时间 年-月-日《= showTime            
            //设置甘特图X轴开始时间与结束时间，默认进入页面获取当天时间的0点和23点59分59秒作为开始和结束时间
            self.grid.XstartTime = startTime;
            self.grid.XendTime = endTime;
    },
    //根据所传参数时间进行当月第一天和最后一天的日期获取
    getNowMonthDate(date) {
      let self = this;
      let tempDate = null;
      if(date==null|| date==undefined || date===''){
          tempDate = new Date();
      }
      let  year = tempDate.getFullYear() + "";
      let month = (tempDate.getMonth() + 1) + "";
        // 本月第一天日期
        let  begin = year + "-" + month + "-01 00:00:00";
        self.grid.FirstDay = begin;
        self.workTimeList.push(new Date(begin));
        // 本月最后一天日期    
        let lastDateOfCurrentMonth = new Date(year,month,0);
        let count = lastDateOfCurrentMonth.getDate();
        let end = year + "-" + month + "-" + count + " 23:59:59";
        self.grid.LastDay =  end;
        self.workTimeList.push(new Date(end));
        //获取当天的参数
        self.loopCount =  count;
    },
    //甘特图series处理函数
    seriesColorHander(params){
            let self = this;
            return '#0796ea';
    },
    drawCustom() {
                let _this = this;
                this.chartCustom = echarts.init(document.getElementById('gantt'));
                function renderItem(params, api) {
                    let categoryIndex = api.value(0);
                    let start = api.coord([api.value(1), categoryIndex]);
                    let end = api.coord([api.value(2), categoryIndex]);
                    let height = api.size([0, 1])[1] * 0.6;

                    let rectShape = echarts.graphic.clipRectByRect({
                        x: start[0],
                        y: start[1] - height / 2,
                        width: end[0] - start[0],
                        height: height
                    }, {
                        x: params.coordSys.x,
                        y: params.coordSys.y,
                        width: params.coordSys.width,
                        height: params.coordSys.height
                    });

                    return rectShape && {
                        type: 'rect',
                        shape: rectShape,
                        style: api.style()
                    };
                }
                let legendData=[],yAxisData =[],seriesData=[];


                console.log( _this.customData )
                for (let i = 0; i < _this.customData.length; i++) {

                    let item = _this.customData[i];
                    yAxisData.push(item.currentDate);
                    // legendData.push({
                    //     name: item.isRepeat == 1 ? "时间重叠" :(item.state == 0 ? "每日任务" : (item.state == 1 ? "发放任务" :"")),
                    //     icon: 'circle'
                    // });

                    seriesData.push({
                        // name: item.isRepeat == 1 ? "时间重叠" :(item.state == 0 ? "每日任务" : (item.state == 1 ? "发放任务" :"")),
                        type: "custom",
                        itemStyle: {
                                normal: {
                                color:"rgb(58, 193, 196)",
                                opacity: 0.8,
                                    }
                              }, 
                        encode: {x: [1, 2], y: 0},
                        renderItem: renderItem,
                        data: [
                            {
                                // name: item.state == 0 ? "每日任务" : (item.state == 1 ? "发放任务" : ''),
                                value: [
                                    item.currentDate,
                                    '2019-01-01 ' + item.startTimeDesc.substr(11),
                                    '2019-01-01 ' + item.endTimeDesc.substr(11),
                                    item.startTime,
                                    item.endTime,
                                    item.drawCode,
                                    item.consumptionTime,
                                    item.itemTypeDesc,
                                ]
                            }
                        ]
                    })
                }
                this.chartCustom.clear();
                this.chartCustom.setOption({
                    color: [
                        '#0796ea',
                        '#F6F6F6',
                        '#0796ea',
                    ],
                    title: {
                        text: '工作统计',
                        textStyle: {
                            color: '#000',
                            fontSize: 17,
                            fontFamily: '微软雅黑'
                        }
                    },
                    tooltip: {
                        backgroundColor: "#F6F6F6",
                        borderWidth: 1,
                        borderColor: "rgba(0,0,0,.3)",
                        triggerOn: "click",
                        confine: true,
                        enterable: true,
                        transitionDuration: 0,
                        textStyle: {color: "#333"},
                        extraCssText: 'box-shadow: 0 0 5px 1px rgba(255, 255, 255, 0.3);',
                        formatter: function (params) {
                            console.log(  params.value  )
                            return '<div style="width: 300px;">' + params.value[0] +
                                '<P>图纸:' + params.value[5]+'</P>' +
                                '<P>任务类型：' + params.value[7]+'</P>' +
                                '<P>开始时间：' + params.value[1].substr(11)+'</P>' +
                                '<P>结束时间：' + params.value[2].substr(11)+'</P>' +
                                '<P>耗时：' + params.value[6]+'</P>' +
                                // '<P>是否实时时间：'+ (params.value[6] == 0 ? '否' : (params.value[6] == 1 ? '是' : '')) +'</P>' +
                                // '<P style="width: 280px;white-space:normal; word-break:break-all;">任务名称：'+params.value[5] +'</P>' +
                                '</div>';
                        }
                    },
                    dataZoom: [
                        {
                            type: 'slider',
                            filterMode: 'weakFilter',
                            showDataShadow: true,
                            bottom: 10,
                            height: 5,
                            borderColor: 'transparent',
                            backgroundColor: '#e2e2e2',
                            handleIcon: 'M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7v-1.2h6.6z M13.3,22H6.7v-1.2h6.6z M13.3,19.6H6.7v-1.2h6.6z',
                            handleSize: 20,
                            handleStyle: {
                                shadowBlur: 6,
                                shadowOffsetX: 1,
                                shadowOffsetY: 2,
                                shadowColor: '#aaa'
                            },
                            labelFormatter: ''
                        },
                        {
                            type: 'inside',
                            filterMode: 'weakFilter'
                        }
                    ],
                    // legend: {
                    //     left:100,
                    //     itemWidth: 14,
                    //     data:legendData
                    // },
                    grid: {left: 100, right: 40, bottom: 50,top:30},
                    xAxis: {
                        type: 'time',
                        splitLine: {show: false},
                        axisLabel: {
                            formatter: function (params) {
                                return _this.timestampToTime(params).substr(10)
                            }
                        }
                    },
                    yAxis: {
                        data: _this.unique(yAxisData)
                    },
                    series: seriesData
                });///
    },
    unique(Array) {
                let res = [];
                let json = {};
                for (let i = 0; i < Array.length; i++) {
                    if (!json[Array[i]]) {
                        res.push(Array[i]);
                        json[Array[i]] = 1;
                    }
                }
                return res;
    },
  }
}
</script>
<style l scoped>

    #charts{
        /*width: 100%;*/
        /*height: 100%;*/
        /*background: #0F3357;*/
    }

    #charts #chartCustom,
    #charts #chartPieType,
    #charts #chartPieFinish{
        border:1px solid #ececec;
        padding:5px;
        box-sizing: border-box;
    }

    #charts #chartPieType,
    #charts #chartPieFinish{
        float: left;
    }
</style>
